<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import { getChannelsAPI, deleteChannelsAPI } from '@/api/article'
import { ref, onMounted } from 'vue'
import ArticleClassificationEdit from './components/ArticleClassificationEdit.vue'

// loading 加载效果
const loading = ref(false)
// 获取dialog组件对象
const dialogRef = ref()
// 文章分类 获取数据列表
const articleList = ref([])
const getArticleList = async () => {
  // 开启加载效果
  loading.value = true
  const {
    data: { data }
  } = await getChannelsAPI()
  articleList.value = data
  // 关闭加载效果
  loading.value = false
}
onMounted(() => {
  getArticleList()
})

// 添加按钮逻辑
const onAdd = () => {
  // 注意： 一定要传入参数 {}
  dialogRef.value.open({})
}

// 编辑按钮逻辑
const onEdit = (row) => {
  dialogRef.value.open(row)
}

// 删除按钮逻辑
const onDelete = async (row) => {
  // 提示用户 是否删除
  await ElMessageBox.confirm('您确定要删除该分类？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  // 发送删除请求
  await deleteChannelsAPI(row.id)
  // 重新拉取数据
  getArticleList()
  // 提示用户 删除成功
  ElMessage.success('删除成功')
}
</script>

<template>
  <page-container title="文章分类">
    <!-- 右侧 button 按钮 -->
    <template #extra>
      <el-button type="primary" @click="onAdd">添加分类</el-button>
    </template>
    <!-- 主题类容 table组件 -->
    <el-table :data="articleList" v-loading="loading">
      <el-table-column label="序号" type="index" width="180"></el-table-column>
      <el-table-column label="分类名称" prop="cate_name"></el-table-column>
      <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button
            type="primary"
            circle
            plain
            :icon="Edit"
            @click="onEdit(row)"
          ></el-button>
          <el-button
            type="danger"
            circle
            plain
            :icon="Delete"
            @click="onDelete(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- dialog 弹框组件 -->
    <ArticleClassificationEdit
      ref="dialogRef"
      @refresh="getArticleList"
    ></ArticleClassificationEdit>
  </page-container>
</template>
